import 'package:flutter/material.dart';
import 'package:terminal_flutter_demo/pages/widget_key_page.dart';

class AnimatedWidgetPage extends StatefulWidget {
  const AnimatedWidgetPage({Key? key}) : super(key: key);

  @override
  _AnimatedWidgetPageState createState() => _AnimatedWidgetPageState();
}

class _AnimatedWidgetPageState extends State<AnimatedWidgetPage>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    )..repeat();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        const SizedBox(
          height: 100,
          child: CircularProgressIndicator(),
        ),
        AnimatedContainer(
          duration: const Duration(seconds: 1),
          child: const Box(color: Colors.blue),
        ),
        const AnimatedOpacity(
          opacity: 1,
          duration: Duration(seconds: 1),
          child: Box(color: Colors.blue),
        ),
        AnimatedPadding(
          padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
          duration: const Duration(seconds: 1),
          child: const Box(color: Colors.blue),
        ),
        const AnimatedDefaultTextStyle(
          style: TextStyle(color: Colors.red),
          duration: Duration(seconds: 1),
          child: Text('data'),
        ),
        const AnimatedSwitcher(
          duration: Duration(seconds: 1),
          // transitionBuilder: (child, animation) {
          // },
          child: Box(color: Colors.blue),
        ),
        AnimatedIcon(
          icon: AnimatedIcons.home_menu,
          progress: _animationController,
        ),
        Stack(
          children: [
            ScaleTransition(
              scale: _animationController
                  .drive(Tween(begin: 0.0, end: 1.0).chain(CurveTween(
                curve: const Interval(
                    0.5, 1), // Interval：在_animationController设置的总动画时间值的百分比内执行动画
              ))),
              child: const Icon(
                Icons.home,
                size: 40,
              ),
            ),
            ScaleTransition(
              scale: _animationController
                  .drive(Tween(begin: 1.0, end: 0.0).chain(CurveTween(
                curve: const Interval(0, 0.5),
              ))),
              child: const Icon(
                Icons.menu,
                size: 40,
              ),
            ),
          ],
        ),
        //
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                RotationTransition(
                  turns: _animationController,
                  child: const FlutterLogo(
                    size: 40,
                  ),
                ),
                ScaleTransition(
                  scale: _animationController,
                  child: const FlutterLogo(
                    size: 40,
                  ),
                ),
                FadeTransition(
                  opacity: _animationController,
                  child: const FlutterLogo(
                    size: 40,
                  ),
                ),
                SizeTransition(
                  sizeFactor: _animationController,
                  child: const FlutterLogo(
                    size: 40,
                  ),
                ),
                SlideTransition(
                  position: Tween(
                    begin: const Offset(0.0, 0.0),
                    end: const Offset(0, 2),
                  )
                      .chain(CurveTween(curve: Curves.bounceInOut))
                      // .chain(CurveTween(curve: const Interval(0.4, 0.6)))
                      .animate(_animationController),
                  child: const FlutterLogo(
                    size: 40,
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  onPressed: () {
                    _animationController.reverse();
                  },
                  icon: const Icon(
                    Icons.rotate_90_degrees_ccw,
                  ),
                ),
                IconButton(
                  onPressed: () {
                    _animationController.repeat(reverse: true);
                  },
                  icon: const Icon(
                    Icons.repeat,
                  ),
                ),
                IconButton(
                  onPressed: () {
                    _animationController.stop();
                  },
                  icon: const Icon(
                    Icons.stop,
                  ),
                ),
              ],
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SlideTransition(
                  position: _animationController.drive(Tween(
                    begin: const Offset(0.0, 0.0),
                    end: const Offset(1.0, 0.0),
                  ).chain(
                    // Interval：在_animationController设置的总动画时间值的百分比内执行动画
                    CurveTween(curve: const Interval(0, 0.3)),
                  )),
                  child: Container(
                    width: 100,
                    height: 30,
                    color: Colors.blue,
                  ),
                ),
                SlideTransition(
                  position: _animationController.drive(Tween(
                    begin: const Offset(0.0, 0.0),
                    end: const Offset(1.0, 0.0),
                  ).chain(
                    CurveTween(curve: const Interval(0.3, 0.6)),
                  )),
                  child: Container(
                    width: 100,
                    height: 30,
                    color: Colors.red,
                  ),
                ),
                SlideTransition(
                  position: _animationController.drive(Tween(
                    begin: const Offset(0.0, 0.0),
                    end: const Offset(1.0, 0.0),
                  ).chain(
                    CurveTween(curve: const Interval(0.6, 0.9)),
                  )),
                  child: Container(
                    width: 100,
                    height: 30,
                    color: Colors.green,
                  ),
                ),
              ],
            )
          ],
        )
      ],
    );
  }
}
